package org.hank.wanandroid.ui.widget

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import coil.annotation.ExperimentalCoilApi
import coil.compose.rememberImagePainter
import org.hank.wanandroid.R
import org.hank.wanandroid.bean.ArticleBean
import org.hank.wanandroid.constants.Constants
import org.hank.wanandroid.viewmodel.ArticleViewModel

//  ┏┓　　　┏┓
//┏┛┻━━━┛┻┓
//┃　　　　　　　┃
//┃　　　━　　　┃
//┃　┳┛　┗┳　┃
//┃　　　　　　　┃
//┃　　　┻　　　┃
//┃　　　　　　　┃
//┗━┓　　　┏━┛
//    ┃　　　┃                  神兽保佑
//    ┃　　　┃                  永无BUG！
//    ┃　　　┗━━━┓
//    ┃　　　　　　　┣┓
//    ┃　　　　　　　┏┛
//    ┗┓┓┏━┳┓┏┛
//      ┃┫┫　┃┫┫
//      ┗┻┛　┗┻┛
/**
 *@auth: Hank
 *邮箱: cs16xiaoc1@163.com
 *创建时间: 2021/11/24 17:03
 *描述:
 */
@Composable
@OptIn(ExperimentalCoilApi::class)
fun itemProject(
    articleItem: ArticleBean,
    onItemClick: (articleItem: ArticleBean) -> Unit,
    OnCollectClick: (articleItem: ArticleBean) -> Unit
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp, 0.dp)
            .clickable { onItemClick(articleItem) }
            .padding(0.dp, 8.dp)
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {
                Image(
                    painter = rememberImagePainter(
                        data = articleItem.envelopePic,
                    ),
                    contentDescription = "project icon",
                    modifier = Modifier
                        .size(95.dp)
                )
                Column {
                    Text(
                        text = articleItem.title,
                        style = MaterialTheme.typography.subtitle2,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )

                    Text(
                        text = articleItem.desc,
                        modifier = Modifier
                            .padding(0.dp, 12.dp)
                            .fillMaxWidth(),
                        style = MaterialTheme.typography.body2,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )

                    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
                        val (textdate, image) = createRefs()
                        Text(
                            text = articleItem.niceDate + '-' + articleItem.author,
                            modifier = Modifier
                                .alpha(0.6f)
                                .constrainAs(textdate) {
                                    start.linkTo(parent.start)
                                    bottom.linkTo(parent.bottom)
                                }, style = MaterialTheme.typography.caption
                        )

                        Image(
                            painter = painterResource(id = if (articleItem.collect) R.mipmap.collect else R.mipmap.article_un_collect),
                            contentDescription = "collect icon",
                            modifier = Modifier
                                .size(25.dp)
                                .clickable { OnCollectClick(articleItem) }
                                .constrainAs(image) {
                                    end.linkTo(parent.end)
                                }
                        )
                    }
                }
            }

            Spacer(modifier = Modifier.height(4.dp))

            Spacer(
                modifier = Modifier
                    .height(0.5.dp)
                    .alpha(0.5f)
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.onBackground)
                    .padding(16.dp, 0.dp)
            )
        }
    }
}

@Composable
fun itemArticle(
    articleItem: ArticleBean,
    onItemClick: (article: ArticleBean) -> Unit,
    OnCollectClick: (article: ArticleBean) -> Unit
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp, 0.dp)
            .clickable { onItemClick(articleItem) }
            .padding(0.dp, 8.dp)
    ) {
        Column(modifier = Modifier.padding(8.dp)) {
            Column {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    if (articleItem.type == 1) {
                        Text(
                            text = "置顶",
                            style = MaterialTheme.typography.body2,
                            color = colorResource(id = R.color.light_red)
                        )
                        Spacer(modifier = Modifier.width(8.dp))
                    }
                    Text(
                        text = if (articleItem.author.isNotEmpty()) articleItem.author else articleItem.shareUser,
                        style = MaterialTheme.typography.caption,
                        modifier = Modifier.alpha(0.6f)
                    )
                    Text(
                        text = articleItem.niceDate,
                        style = MaterialTheme.typography.caption,
                        modifier = Modifier
                            .fillMaxWidth()
                            .alpha(0.6f),
                        textAlign = TextAlign.End
                    )
                }
                Text(
                    text = articleItem.title,
                    style = MaterialTheme.typography.body1,
                    modifier = Modifier.padding(0.dp, 16.dp)
                )
                ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
                    val (text, image) = createRefs()
                    Text(text = articleItem.superChapterName,
                        style = MaterialTheme.typography.caption,
                        modifier = Modifier
                            .alpha(0.6f)
                            .constrainAs(text) {
                                start.linkTo(parent.start)
                            })

                    Image(
                        painter = painterResource(id = if (articleItem.collect) R.mipmap.collect else R.mipmap.article_un_collect),
                        contentDescription = "collect icon",
                        modifier = Modifier
                            .constrainAs(image) {
                                end.linkTo(parent.end)
                            }
                            .size(25.dp)
                            .clickable { OnCollectClick(articleItem) }
                    )
                }
            }
            Spacer(modifier = Modifier.height(8.dp))

            Spacer(
                modifier = Modifier
                    .height(0.5.dp)
                    .alpha(0.5f)
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.onBackground)
                    .padding(16.dp, 0.dp)
            )
        }
    }
}

@Composable
fun lazyColumnContent(
    viewModel: ArticleViewModel,
    modifier: Modifier = Modifier,
    OnItemClick: (article: ArticleBean) -> Unit,
    OnCollectClick: (article: ArticleBean) -> Unit
) {
    val activeData by viewModel.articleListData.collectAsState()
    Column {
        activeData.forEach { item ->
            if (item.itemType == Constants.ITEM_ARTICLE)
                itemArticle(
                    articleItem = item,
                    OnItemClick,
                    OnCollectClick
                )
            else
                itemProject(
                    articleItem = item,
                    OnItemClick,
                    OnCollectClick
                )
        }
    }
}

@Preview
@Composable
private fun myPreview() {
    MaterialTheme {
        Column {
//            itemProject()
            Spacer(modifier = Modifier.height(8.dp))
//            itemArticle()
        }
    }
}